<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>江北发布</title>
		<link rel="stylesheet" href="../../css/media.css" />
		<link rel="stylesheet" href="../../css/iconfont.css"c>
		<link rel="stylesheet" href="../../css/common.css" />
		<style>
			.topNav{
				width: 6.9rem;
				height: 1.4rem;
				border-radius: .1rem;
				background: #5FB6F9;
				margin-top: .4rem;
				margin-left: auto;
				margin-right: auto;
			}
			.topNav ul{
				height: 100%;
			}
			.topNav ul li{
				width: 24.8%;
				height: 100%;
				float: left;
				border-right: 1px solid rgba(0,0,0,0.1);
				color: #FFFFFF;
				text-align: center;
			}
			.topNav li:last-child{
				border: 0;
			}
			.topNav li p:first-child{
				font-size: .46rem;
				margin-top: .24rem;
			}
			.topNav li p:nth-child(2){
				font-size: .26rem;
				margin-top: .14rem;
			}
			.active{
				background:rgba(0,0,0,0.2);
			}
			.middle{
				width: 6.9rem;
				margin-left: auto;
				margin-right: auto;
				margin-top: .4rem;
			}
			.middle ul {
				width: 100%;
				overflow: auto;
				border-left: 1px solid #E5E5E5;
				border-top: 1px solid #E5E5E5;
			}
			.middle ul li{
				width: 33%;
				height: 2rem;
				float: left;
				border-right: 1px solid #E5E5E5;
				border-bottom: 1px solid #E5E5E5;
				text-align: center;
			}
			.middle ul li img{
				display: block;
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
				margin-left: auto;
				margin-right: auto;
				margin-top: .24rem;
			}
			.middle ul li p{
				font-size: .26rem;
				color: #666666;
				margin-top: .15rem;
			}
			.bottom{
				width: 100%;
				height: 1.8rem;
				position: absolute;
				bottom: 0;
				z-index: 100;
				background: #FFFFFF;
				display: none;
			}
			.bottom ul{
				width: 100%;
				height: 100%;
			}
			.bottom ul li{
				width: 33.33%;
				height: 100%;
				float: left;
				text-align: center;
			}
			.icon-bottom{
				width: .84rem;
				height: .84rem;
				line-height: .7rem;
				margin-left: auto;
				margin-right: auto;
				margin-top: .28rem;
				border-radius: 50%;
				border: 1px solid #E6E6E6;
			}
			.icon-bottom img{
				width: 70%;
				height: 70%;
			}
			.bottom ul li p{
				font-size: .26rem;
				color: #666666;
				margin-top: .15rem;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="topNav">
				<ul>
					<li class="active">
						<p class="iconfont icon-danwei"></p>
						<p>机关布局</p>
					</li>
					<li>
						<p class="iconfont icon-danwei"></p>
						<p>直属单位</p>
					</li>
					<li>
						<p class="iconfont iconfont icon-zhishu"></p>
						<p>直属街道</p>
					</li>
					<li>
						<p class="iconfont icon-xiangguan"></p>
						<p>相关单位</p>
					</li>
				</ul>
			</div>
			<div class="middle">
				<ul>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
					<li>
						<img src="../../img/activity.png" />
						<p>机关布局</p>
					</li>
				</ul>
			</div>
			<div class="cover"></div>
			<div class="bottom">
				<ul>
					<li>
						<div class="icon-bottom">
							<img src="../../img/publish/wechat.png" />
						</div>
						<p>微信</p>
					</li>
					<li>
						<div class="icon-bottom">
							<img src="../../img/publish/weibo.png" />
						</div>
						<p>新浪微博</p>
					</li>
					<li>
						<div class="icon-bottom">
							<img src="../../img/publish/topNews.png" />
						</div>
						<p>今日头条</p>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../js/jquery.min.js" ></script>
	<script type="text/javascript">
		$(function(){
			$('.topNav ul li').bind('click',function(){
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
			});
			
			$('.middle ul li').bind('click',function(){
				$('.cover').show();
				$('.bottom').show();
			});
			$('.cover').bind('click',function(){
				$('.bottom').hide();
				$('.cover').hide();
			});
		});
	</script>
		
	
</html>
